<template slot-scope="scope">
  <div class='container'>
    <el-dialog :title="titleInfo.text+titleInfo.pageTitle" :visible.sync="dialogVisible" width="30%">
      <el-form label-width="80px" :model="formBase" ref="dataForm" :rules="ruleInline">
        <el-form-item label="所属学科" prop="subject">
          <el-select placeholder="请选择活动区域" v-model="formBase.subjectID">
            <el-option v-for="item in subjectNameList" :key="item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="formBase.tagName"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlesub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  name: 'tagsadd',

  data () {
    return {
      subjectNameList: [],
      dialogVisible: false,

      // 表单验证
      ruleInline: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ],
        tagName:
          [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      }
    }
  },
  props: {
    List: {
      type: Array
    },
    formBase: {
      type: Object,
      required: true
    },
    titleInfo: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 提交表单
    handlesub () {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          const data = { ...this.formBase }
          if (this.formBase.id) {
            this.dialogVisible = false
            await update(data).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          } else {
            try {
              await add(this.formBase)
              this.dialogVisible = false
              this.$emit('newDataes', this.formBase)
            } catch (error) {
              console.log(error)
            }
          }
        }
      })
    },
    // 控制弹窗
    dialogV () {
      this.dialogVisible = true
    },
    // 获取下拉的所属学科
    async listname () {
      const ret = await simple()
      this.subjectNameList = ret.data
      // console.log(this.formBase)
    }

  },
  created () {
    this.listname()
  }

}
</script>

<style scoped lang='less'></style>
